<template>
    <div>
        <!-- {{ disabledType }} //判断是否禁用 -->
        <!-- SHOWTYPE 1=整数,2=浮点,3=日期,4=文本,5=下拉,6=图像,7=部门（单选）,8=人员（单选）,9=文本域 -->
        <!--IS_QUERY  查询模式0=不参加查询,1=精确查询,2=模糊查询,3=左匹配查询,4=区间查询,5=列表查询,6=单选对话框,7=多选对话框 -->
        <!-- typeInput==true  修改著录显示  typeInput=其余参数   列表input搜索显示 -->
                <!-- {{ item }}{{ typeInput }}{{ typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px' }} -->
        <el-input v-if="item.SHOWTYPE == 1" v-model="queryParams[item.FIELD_NAME]" type="number"
            oninput="if(value.length>10)value=value.slice(0,10);if(value<0)value=0" placeholder=""
            :clearable="IS_ZT == '1' ? false : true" :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'"
            @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" />

        <el-input v-else-if="item.SHOWTYPE == 2" v-model="queryParams[item.FIELD_NAME]" type="number" placeholder=""
            @input="queryParams[item.FIELD_NAME] = queryParams[item.FIELD_NAME].replace(/^(0+)|[^\d]+/g, '')"
            :clearable="IS_ZT == '1' ? false : true" :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'"
            @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" :maxlength="10" />
        <!--   区间查询   而且还是个日期 -->
        <template v-else-if="item.SHOWTYPE == 3 && item.IS_QUERY == 4">
            <div v-if="dictList[item.FIELD_NAME].length > 0">
                <div v-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyy'">
                    <div v-if="inputType == 1">
                        <el-date-picker v-model="queryParams[item.FIELD_NAME + '_start']"
                            :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="year" format="yyyy"
                            :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择开始年度"
                            @change="onChangeTapND($event, item.FIELD_NAME)" :disabled="disabledType">
                        </el-date-picker><span style="margin:0 10px">-</span>
                        <el-date-picker v-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyy'"
                            v-model="queryParams[item.FIELD_NAME + '_end']"
                            :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="year" format="yyyy"
                            :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择结束年度"
                            @change="onChangeTapND($event, item.FIELD_NAME)" :disabled="disabledType">
                        </el-date-picker>
                    </div>
                    <div v-else>
                        <el-date-picker v-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyy'"
                            v-model="queryParams[item.FIELD_NAME]"
                            :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="year" format="yyyy"
                            :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择年度" @change="onChangeTap"
                            :disabled="disabledType" :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </div>
                <!-- <el-date-picker v-else-if="dictList[0].dictValue == 'yyyy-MM-dd HH:mm:ss'"
                    v-model="queryParams[item.FIELD_NAME]" type="datetime" placeholder="选择日期时间"
                    :value-format="dictList[0].dictValue" :disabled="disabledType">
                </el-date-picker> -->
                <!-- inputType==1   查询列表显示开始日期和结束日期-->
                <div v-else-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyyMMdd'">
                    <el-date-picker v-model="queryParams[item.FIELD_NAME]"
                        :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChangeTap"
                        v-if="inputType == 1" :disabled="disabledType" format="yyyy-MM-dd"
                        :value-format="dictList[item.FIELD_NAME][0].dictValue"></el-date-picker>
                    <el-date-picker v-else v-model="queryParams[item.FIELD_NAME]" style="width: 240px" type="date"
                        format="yyyy-MM-dd" :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择日期"
                        @change="onChangeTap" :disabled="disabledType">
                    </el-date-picker>
                </div>
            </div>
        </template>
        <!--   不是区间查询   而且还是个日期 -->
        <template v-else-if="item.SHOWTYPE == 3 && item.IS_QUERY != 4">
            <div v-if="dictList[item.FIELD_NAME].length > 0">
                <el-date-picker v-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyy'"
                    v-model="queryParams[item.FIELD_NAME]"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="year" format="yyyy"
                    :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择年度" @change="onChangeTap"
                    :disabled="disabledType" :picker-options="pickerOptions">
                </el-date-picker>
                <!-- <el-date-picker v-else-if="dictList[0].dictValue == 'yyyy-MM-dd HH:mm:ss'"
                    v-model="queryParams[item.FIELD_NAME]" type="datetime" placeholder="选择日期时间"
                    :value-format="dictList[0].dictValue" :disabled="disabledType">
                </el-date-picker> -->
                <div v-else-if="dictList[item.FIELD_NAME][0].dictValue == 'yyyyMMdd'">
                    <el-date-picker v-model="queryParams[item.FIELD_NAME]"
                        :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'" type="date"
                        format="yyyy-MM-dd" :value-format="dictList[item.FIELD_NAME][0].dictValue" placeholder="选择日期"
                        @change="onChangeTap" :disabled="disabledType">
                    </el-date-picker>
                </div>
            </div>
        </template>
        <el-input v-else-if="item.SHOWTYPE == 4" v-model="queryParams[item.FIELD_NAME]" placeholder=""
            :clearable="IS_ZT == '1' ? false : true" :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px'"
            @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" />
        <div v-else-if="item.SHOWTYPE == 5">
                <template v-if="sourceType == '1'">
                    <el-select v-model="queryParams[item.FIELD_NAME]" placeholder="请选择" clearable
                        :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 242px'"
                        @change="onChangeTap(item.FIELD_NAME)" :disabled="disabledType" @keyup.enter.native="handleQuery">
                        <el-option v-for="i in dictList[item.FIELD_NAME]" :key="i.dictValue" :label="i.dictLabel"
                            :value="i.dictLabel">
                        </el-option>
                    </el-select>
                </template>
                <template v-else>
                    <el-select v-model="queryParams[item.FIELD_NAME]" placeholder="请选择" clearable
                        :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 242px'"
                        @change="onChangeTap(item.FIELD_NAME)" :disabled="disabledType" @keyup.enter.native="handleQuery">
                        <el-option v-for="i in dictList[item.FIELD_NAME]" :key="i.dictValue" :label="i.dictLabel"
                            :value="i.dictValue">
                        </el-option>
                    </el-select>
                </template>
        </div>
     
        <div v-else-if="item.SHOWTYPE == 7">
            <template v-if="isStyle">
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px;font-size:12px' : 'width:242px; height: 32px; line-height: 32px;font-size:12px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="optionSelect" label placeholder="请选择"
                    @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px;font-size:12px' : 'width:242px; height: 32px; line-height: 32px;font-size:12px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="optionSelect" label placeholder="请选择"
                    @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
            </template>
            <template v-else>
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="optionSelect" label placeholder="请选择"
                    @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px;font-size:14px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="optionSelect" label placeholder="请选择"
                    @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
            </template>

        </div>
       
        <div v-if="item.SHOWTYPE == 8">
            <template v-if="isStyle">
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px;font-size:12px' : 'width:242px; height: 32px; line-height: 32px;font-size:12px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="userTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px' : 'width:242px; height: 32px; line-height: 32px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="userTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
            </template>
            <template v-else>
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px;font-size:14px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="userTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px;font-size:14px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="userTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
            </template>

        </div>
        <div v-if="item.SHOWTYPE == 10">
            <template v-if="isStyle">
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px;font-size:12px' : 'width:242px; height: 32px; line-height: 32px;font-size:12px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="specialityTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap2($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput1($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 32px; line-height: 32px;font-size:12px' : 'width:242px; height: 32px; line-height: 32px;font-size:12px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="specialityTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap2($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput1($event, item.FIELD_NAME)" :normalizer="normalizer"/>

            </template>
            <template v-else>
                <treeselect v-if="isType == 'senior'"
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px;font-size:14px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="specialityTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap2($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput1($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
                <treeselect v-else
                    :style="typeInput ? 'width:' + item.COL_WIDTH + 'px; height: 36px; line-height: 36px;font-size:14px' : 'width:242px; height: 36px; line-height: 36px;font-size:14px'"
                    v-model="queryParams[item.FIELD_NAME + '_ID']" :options="specialityTreeList" label placeholder="请选择"
                    :disable-branch-nodes="true" @select="onChangeTap2($event, item.FIELD_NAME)" :disabled="disabledType"
                    @input="treeSelectInput1($event, item.FIELD_NAME)" :normalizer="normalizer" />
            </template>
        </div>
        <el-input type="textarea" v-model="queryParams[item.FIELD_NAME]"
            :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 300px'" v-else-if="item.SHOWTYPE == 9"
            @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType"></el-input>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeNoDateScope } from "@/api/system/user";
import { getusertree } from "@/api/archive/archivalAppraisal/openness/openArchivesAppraisal"
import { getZyTree } from "@/api/stage/stageManagement/professionalComparison";
import { getTypeObject } from '@/api/archive/dict/dictManageData';
import {
    getdamjbyrymj
} from "@/api/archive/fileCollection/offlinReception.js";
export default {
    components: {
        Treeselect,
        listVav: ""
    },
    // isType 针对高级检索
    props: ["item", "inputParams", "inputType", "disabledType", 'listFrom', 'sourceType', 'typeInput', 'isType','tenantCode'],
    watch: {
        item: {
            handler(vav) {
               
                if (sessionStorage.getItem("IS_ZT") != null) { //判断是否是中铁项目1 是  其余返回的数据都不是中铁项目  登陆页面请求的接口
                    this.IS_ZT = sessionStorage.getItem("IS_ZT");
                }
                if (this.$store.getters.size == 'small') {
                    // :style="typeInput?'width:'+item.DATA_LENGTH+'px':'width: 240px'"
                    // this.style = 'width:242px; height: 32px; line-height: 32px'
                    this.isStyle = true
                } else {
                    // this.style = 'width:242px; height: 36px; line-height: 36px'
                    this.isStyle = false
                }
                this.listVav = vav;



                if (sessionStorage.getItem(vav.FIELD_NAME) != null) {
                    this.dictList = JSON.parse(sessionStorage.getItem(vav.FIELD_NAME))

                } else {
                    getTypeObject(vav.FIELD_NAME,{tenantCode:this.tenantCode}).then((res) => {
                        if(vav.FIELD_NAME=='MJ'){ //如果是Mj的情况下调用接口
                            //使用sysadmin里面密级对照表模块配置完成的接口列表
                            getdamjbyrymj().then(resdata => { //此接口没有返回dictLabel，需要组装接口
                                var mjdata=[];
                                if(vav.FIELD_NAME=='MJ'){ //如果是Mj的情况下
                                for(var i in resdata.data){ 
                                    for(var j in res.data.MJ){
                                        if(resdata.data[i].daMj==res.data.MJ[j].dictValue){
                                            mjdata.push(res.data.MJ[j])
                                        }
                                    }
                                }
                                res.data.MJ=mjdata
                                }
                                this.dictList = res.data;
                            
                                sessionStorage.setItem(vav.FIELD_NAME, JSON.stringify(res.data));
                            })
                        
                        }{ //否则不调用接口直接渲染
                            this.dictList = res.data;
                                sessionStorage.setItem(vav.FIELD_NAME, JSON.stringify(res.data));
                        } 
                    
                    })
                }
                // getDicts_archive(vav.FIELD_NAME).then(res => {
                //     this.dictList = res.data

                // }).catch(error => {
                // })

                //树结构的下拉框
                switch (vav.SHOWTYPE) {
                    case 7:// 7=部门（单选）
                        // 执行代码块 1
                        this.deptTreeSelectPost();
                        break;
                    case 8: //8=人员（单选
                        // 执行代码块 2
                        this.getusertreeList();
                        break;
                    case 10: // 10=专业
                        this.getSpecialityTree();
                        break;
                    default:
                    // 与 case 1 和 case 2 不同时执行的代码
                }

            },
            immediate: true,
            deep: true
        },
        inputParams: {  //修改添加获取的参数
            handler(vav) {
                if (vav == undefined) {
                    this.queryParams = {} //添加时没有参数显示{}
                } else if (vav.length <= 0) {
                    this.queryParams = {} //搜索时点击重置{}
                } else {
                    //修改进入的时候日期后端返回来是int 类型，前端需要改成string类型显示页面
                    if (this.inputType != "1") {
                        for (var i in vav) {
                            if (i == "RQ" || i == "TYPE") {
                                // console.log(typeof (vav[i]), i, vav[i], "liu")
                                if (vav[i] != null) {
                                    vav[i] = vav[i].toString();
                                }

                            }
                        }
                    }

                    this.queryParams = vav; //修改有参数赋值参数渲染到输入框里面
                }

            },
            immediate: true
        }
    },


    data() {
        return {
            isStyle: "",
            queryParams: {},
            itemData: "",
            optionSelect: [],
            userTreeList: [],
            specialityTreeList: [], //专业树
            isList: [
                {
                    value: "是",
                    lable: 1
                }, {
                    value: "否",
                    lable: 0
                }
            ],
            dictList: [],
            //el-date-picker禁止选取未来年份
            pickerOptions: {
                disabledDate(time) {
                    // 获取当前时间
                    const today = new Date();
                    //  比较日期，将未来的年份禁用
                    return time.getFullYear() > today.getFullYear();
                }
            },
            style: "",
            IS_ZT: "",//是否是中铁项目1是 2不是，判断input是不是去掉清除icon

        }
    },
    created() {

    },
    mounted() {


    },
    computed() {


    },
    methods: {
         // 只能选择数据下面有children 的数据，没有children的时候禁用
     normalizer(node) {
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },
        handleQuery() {
            this.$emit("handleQuery")
        },

        // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
        treeSelectInput(val, inputVal) {
            // console.log(val, inputVal, 'input事件')
            if (val == undefined) {
                this.queryParams[inputVal] = null
                this.queryParams[inputVal + "_ID"] = null
            }
            this.$emit("onChangeTap", this.queryParams)
            // console.log(this.value, 'this.value -- input') // 这个不需要 延迟
        },
        treeSelectInput1(val, inputVal) {
            if (val == undefined) {
                this.queryParams[inputVal] = null
                this.queryParams[inputVal + "_CODE"] = null
                this.queryParams[inputVal + "_ID"] = null
            }
            this.$emit("onChangeTap", this.queryParams)
        },
        // // 选中触发（清除值的时候不会触发）
        // treeSelectChange(raw, instanceId) {
        //   console.log(raw, '当前的对象')
        //   setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
        //     console.log(this.value, 'this.value -- select')
        //   })
        // },
        onChangeTap(val) {

            if (val == "BGQX") { //判断是否是保管期限下拉，如果是给子页面传字段判断保管期限范围在输入指定范围字段时保管期限也可以切换
                var data = {
                    "queryParams": this.queryParams,
                    "val": val
                }
                this.$emit("onChangeTap", data)
            } else {
                this.$emit("onChangeTap", this.queryParams)
            }

        },
        onChangeTap1(val, inputVal) {
            this.queryParams[inputVal] = val.label;
            this.$emit("onChangeTap", this.queryParams)
            // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
        },
        onChangeTap2(val, inputVal) {
            this.queryParams[inputVal] = val.label;
            this.queryParams[inputVal + "_CODE"] = val.code;
            this.$emit("onChangeTap", this.queryParams)
            // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
        },
        // 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象
        treeSelectDeselect(raw, instanceId) {
            // console.log(raw, 'deselect-->>')
        },
        // 搜索
        treeSelectSearch(searchQuery, instanceId) {
            // console.log(searchQuery, '当前搜索的值')
        },
        // 展开触发
        treeSelectOpen(instanceId) {
            // console.log('展开了')
        },
        // 关闭触发
        treeSelectClose(val, inputVal) {
            // console.log(value, '当前的value值')
            // this.queryParams[inputVal] = val.label;
            // this.queryParams[inputVal + "_ID"] = val.id;
            // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
        },


        //部门（单选）
        deptTreeSelectPost() {
            deptTreeNoDateScope({tenantCode:this.tenantCode}).then(response => {
                this.optionSelect = response.data;
            })
        },


        //人员 （单选）
        getusertreeList() {
            getusertree({tenantCode:this.tenantCode}).then(res => {
                // console.log(res, "sdlkfjkl")
                this.userTreeList = res.data;
            })
        },
        //专业
        getSpecialityTree() {
            getZyTree({tenantCode:this.tenantCode}).then(response => {
                this.specialityTreeList = response.data
            })
        },


        //日期年度
        onChangeTapND(val, inputVal) {
            this.queryParams[inputVal] = [this.queryParams.ND_start, this.queryParams.ND_end]
            // console.log(val, inputVal, this.queryParams, "_______________________")
        },

    },

}
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

::v-deep input[type="number"] {
    -moz-appearance: textfield;
}



::v-deep .vue-treeselect__control {
    height: inherit;
}

::v-deep .vue-treeselect__placeholder,
.vue-treeselect__single-value {
    line-height: inherit;
}
</style>
